<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统配置 - AI智能体开发平台</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="za.css">
</head>
<body style="background-color: #FFFFFF; margin: 0; padding: 20px;">
    <div class="page-header" style="margin-bottom: 20px;">
        <h2>系统配置</h2>
        <p style="color: #909399; margin-top: 8px;">管理系统基本设置、API连接参数、安全选项等配置项</p>
    </div>
    
    <!-- 配置项选项卡 -->
    <div class="layui-card" style="margin-bottom: 20px;">
        <div class="layui-card-body">
            <div class="layui-tab" lay-filter="configTabs">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本设置</li>
                    <li>API配置</li>
                    <li>安全设置</li>
                    <li>存储配置</li>
                </ul>
                <div class="layui-tab-content">
                    <!-- 基本设置 -->
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" id="basicConfigForm" lay-filter="basicConfigForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">系统名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="systemName" placeholder="请输入系统名称" value="AI智能体开发平台" 
                                        class="layui-input" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">系统描述</label>
                                <div class="layui-input-block">
                                    <textarea name="systemDescription" placeholder="请输入系统描述" 
                                        class="layui-textarea" rows="3">企业级AI智能体开发与管理平台，支持多模型集成与知识库管理</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">默认语言</label>
                                <div class="layui-input-block">
                                    <select name="defaultLanguage" lay-verify="required">
                                        <option value="zh-CN" selected>简体中文</option>
                                        <option value="en-US">English</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">时区设置</label>
                                <div class="layui-input-block">
                                    <select name="timezone" lay-verify="required">
                                        <option value="Asia/Shanghai" selected>Asia/Shanghai (UTC+8)</option>
                                        <option value="UTC">UTC</option>
                                        <option value="America/New_York">America/New_York (UTC-5)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">调试模式</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="debugMode" lay-skin="switch" lay-text="开启|关闭">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">自动更新检查</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="autoUpdateCheck" checked lay-skin="switch" lay-text="开启|关闭">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 130px;">
                                    <button class="za-btn za-btn-primary" lay-submit lay-filter="basicConfigSubmit">保存设置</button>
                                    <button type="reset" class="za-btn za-btn-secondary" style="margin-left: 10px;">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                    <!-- API配置 -->
                    <div class="layui-tab-item">
                        <form class="layui-form" id="apiConfigForm" lay-filter="apiConfigForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">OpenAI API Key</label>
                                <div class="layui-input-block">
                                    <input type="password" name="openaiApiKey" placeholder="请输入OpenAI API Key" 
                                        value="sk-********************************" class="layui-input">
                                    <div class="layui-form-mid layui-word-aux">用于访问OpenAI模型服务</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">模型超时设置</label>
                                <div class="layui-input-block">
                                    <input type="number" name="modelTimeout" placeholder="请输入超时时间(秒)" value="30" 
                                        class="layui-input" lay-verify="required|number">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">API代理设置</label>
                                <div class="layui-input-block">
                                    <input type="text" name="apiProxy" placeholder="留空表示不使用代理" 
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">默认模型选择</label>
                                <div class="layui-input-block">
                                    <select name="defaultModel" lay-verify="required">
                                        <option value="gpt-4" selected>GPT-4</option>
                                        <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                                        <option value="claude-3-opus-20240229">Claude 3 Opus</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">API请求限流</label>
                                <div class="layui-input-block">
                                    <input type="number" name="apiRequestLimit" placeholder="每分钟最大请求数" value="60" 
                                        class="layui-input" lay-verify="required|number">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 130px;">
                                    <button class="za-btn za-btn-primary" lay-submit lay-filter="apiConfigSubmit">保存设置</button>
                                    <button type="reset" class="za-btn za-btn-secondary" style="margin-left: 10px;">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 安全设置 -->
                    <div class="layui-tab-item">
                        <form class="layui-form" id="securityConfigForm" lay-filter="securityConfigForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">登录验证码</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="loginCaptcha" checked lay-skin="switch" lay-text="开启|关闭">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">密码复杂度要求</label>
                                <div class="layui-input-block">
                                    <select name="passwordComplexity">
                                        <option value="low">低（至少6位）</option>
                                        <option value="medium" selected>中（至少8位，包含字母和数字）</option>
                                        <option value="high">高（至少10位，包含大小写字母、数字和特殊字符）</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">会话超时</label>
                                <div class="layui-input-block">
                                    <input type="number" name="sessionTimeout" placeholder="会话超时时间(分钟)" value="30" 
                                        class="layui-input" lay-verify="required|number">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">失败登录限制</label>
                                <div class="layui-input-block">
                                    <input type="number" name="maxFailedLogins" placeholder="允许的最大失败次数" value="5" 
                                        class="layui-input" lay-verify="required|number">
                                    <div class="layui-form-mid layui-word-aux">超过次数将临时锁定账号</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">数据加密</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="dataEncryption" checked lay-skin="switch" lay-text="开启|关闭">
                                    <div class="layui-form-mid layui-word-aux">开启后对敏感数据进行加密存储</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 130px;">
                                    <button class="za-btn za-btn-primary" lay-submit lay-filter="securityConfigSubmit">保存设置</button>
                                    <button type="reset" class="za-btn za-btn-secondary" style="margin-left: 10px;">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    
                    <!-- 存储配置 -->
                    <div class="layui-tab-item">
                        <form class="layui-form" id="storageConfigForm" lay-filter="storageConfigForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">文件存储方式</label>
                                <div class="layui-input-block">
                                    <select name="storageType" lay-verify="required">
                                        <option value="local" selected>本地存储</option>
                                        <option value="oss">阿里云OSS</option>
                                        <option value="s3">Amazon S3</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">本地存储路径</label>
                                <div class="layui-input-block">
                                    <input type="text" name="localStoragePath" placeholder="请输入本地存储路径" value="./storage" 
                                        class="layui-input" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">最大文件大小</label>
                                <div class="layui-input-block">
                                    <input type="number" name="maxFileSize" placeholder="最大文件大小(MB)" value="50" 
                                        class="layui-input" lay-verify="required|number">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">允许的文件类型</label>
                                <div class="layui-input-block">
                                    <input type="text" name="allowedFileTypes" placeholder="请输入允许的文件类型，用逗号分隔" 
                                        value="jpg,jpeg,png,gif,pdf,doc,docx,xls,xlsx,txt,json" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="width: 120px;">自动清理策略</label>
                                <div class="layui-input-block">
                                    <select name="cleanupStrategy">
                                        <option value="never">不自动清理</option>
                                        <option value="weekly" selected>每周清理</option>
                                        <option value="monthly">每月清理</option>
                                    </select>
                                    <div class="layui-form-mid layui-word-aux">清理超过保留期的临时文件</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="margin-left: 130px;">
                                    <button class="za-btn za-btn-primary" lay-submit lay-filter="storageConfigSubmit">保存设置</button>
                                    <button type="reset" class="za-btn za-btn-secondary" style="margin-left: 10px;">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="layui/layui.js"></script>
    <script>
        layui.use(['jquery', 'form', 'layer', 'tab'], function() {
            var $ = layui.jquery;
            var form = layui.form;
            var layer = layui.layer;
            
            // 基本设置表单提交
            form.on('submit(basicConfigSubmit)', function(data) {
                // 模拟保存操作
                console.log('基本设置保存:', data.field);
                layer.msg('基本设置保存成功', { icon: 1 });
                return false;
            });
            
            // API配置表单提交
            form.on('submit(apiConfigSubmit)', function(data) {
                // 模拟保存操作
                console.log('API配置保存:', data.field);
                layer.msg('API配置保存成功', { icon: 1 });
                return false;
            });
            
            // 安全设置表单提交
            form.on('submit(securityConfigSubmit)', function(data) {
                // 模拟保存操作
                console.log('安全设置保存:', data.field);
                layer.msg('安全设置保存成功', { icon: 1 });
                return false;
            });
            
            // 存储配置表单提交
            form.on('submit(storageConfigSubmit)', function(data) {
                // 模拟保存操作
                console.log('存储配置保存:', data.field);
                layer.msg('存储配置保存成功', { icon: 1 });
                return false;
            });
            
            // 监听文件存储方式变化
            form.on('select(storageType)', function(data) {
                var storageType = data.value;
                if (storageType === 'local') {
                    $('.layui-form-item:has([name="localStoragePath"])').show();
                } else {
                    $('.layui-form-item:has([name="localStoragePath"])').hide();
                }
            });
            
            // 初始化页面
            $(function() {
                // 初始化表单
                form.render();
                
                // 绑定重置按钮事件
                $('button[type="reset"]').on('click', function() {
                    layer.msg('已重置为默认值', { icon: 0 });
                });
            });
        });
    </script>
</body>
</html>